<template>
  <div
    class="image-block"
    :style="{
      height: compData.style.height + 'px',
      'border-top-left-radius': compData.data.borderRadiusTop + 'px',
      'border-top-right-radius': compData.data.borderRadiusTop + 'px',
      'border-bottom-left-radius': compData.data.borderRadiusBottom + 'px',
      'border-bottom-right-radius': compData.data.borderRadiusBottom + 'px',
    }"
  >
    <sa-image :url="compData.data.src" fit="fill" radius="0" :suffix="null"></sa-image>
    <div class="title">{{ compData.data.title }}</div>
  </div>
</template>

<script setup>
  const props = defineProps(['compData']);
</script>

<style lang="scss" scoped>
  .image-block {
    overflow: hidden;
    .sa-image {
      height: 100%;
    }
  }
</style>
